<template>
	<view class="p-50 p-t-30 left">
		<view class="left title">
			<text class="ts-40 tb wa left">
				<text class="tc-green">{{info.brand}}</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-5">
				<text class="tc-gray">{{info.model}} | {{info.vehicle_layout}}</text>
			</text>
			<image class="title-icon" src="/static/img/add.png" style="right: 0rpx; border-radius: 0;" @click="addCar()"></image>
			<image class="title-icon" src="/static/img/jian.png" style="border-radius: 0;" @click="carList()"></image>
		</view>
		
		<view class="form-item tc" style="margin-top: 55rpx;">
			<image :src="`/static/img/car/${info.vehicle_type}.png`"></image>
		</view>
		<view v-if="!info.battery_id" class="form-band">
			<text class="tc-green tb ts-38 col-1 left m-b-10">绑定电池</text>
			<text class="tc-gray ts-26 col-1 left">如何添加绑定君能锂电池</text>
			<image class="form-band-icon" src="/static/img/band.png"  @click="bandind()"></image>
		</view>
		<view v-if="info.battery_id" class="form-band w650" style="border: 0; padding: 0; margin: 0rpx; overflow: hidden; position: relative;">
			<view class="form-band form-band-3" @click="lastDian()" style="width: 148rpx;">
				<image class="form-band-icon1" src="/static/img/dian.png"></image>
				<text class="tc-green tb ts-36 col-1 left m-b-10 tr">{{info.battery.rsoc}}</text>
				<text class="tc-gray ts-26 col-1 left tr">剩余电量</text>
			</view>
			<view class="form-band form-band-3" @click="lastDian()" style="position: absolute; left: 50%; transform: translateX(-50%);">
				<image class="form-band-icon1" src="/static/img/wendu.png"></image>
				<text class="tc-green tb ts-36 col-1 left m-b-10 tr">{{info.battery.maxNtc}}</text>
				<text class="tc-gray ts-26 col-1 left tr">电池加热</text>
			</view>
			<view class="form-band form-band-3" style="text-align: center; background: #f9f9f9; float: right;" @click="qiangzhi()">
				<image class="form-band-icon3" src="/static/img/kai.png"></image>
				<text class="tc-gray ts-26 col-1 left">强制启动</text>
			</view>
		</view>
		<view v-if="info.battery_id" class="form-map">
			<map class="map" :latitude="latitude" :longitude="longitude">
			</map>
		</view>
		<view v-if="info.battery_id" class="form-band w650" style="border: 0; padding: 0; margin: 0rpx; overflow: hidden;">
			<view class="form-band form-band-2 flex ali-cen just-sb" @click="getLog(1)">
				<image class="form-band-icon2" src="/static/img/action.png"></image>
				<text class="tc-gray ts-26 left">强制启动记录</text>
			</view>
			<view class="form-band form-band-2 flex ali-cen just-sb" @click="getLog(2)" style="float: right;">
				<image class="form-band-icon2" src="/static/img/hot.png"></image>
				<text class="tc-gray ts-26 left">预约加热记录</text>
			</view>
		</view>
		<view class="form-map" @click="mapShow()">
			<image class="map" src="/static/img/map.png"></image>
			<view class="map-b"></view>
			<text class="ts-32 col-1 left psa" style="bottom: 30rpx; left: 40rpx; color: #f9f9f9;">君能售后服务站点</text>
		</view>
		<xy-tabbar />
	</view>
</template>

<script>
	// import { mapState } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar
		},
		data() {
			return {
				css:{},
				submitDisabled:false,
				latitude: 39.909,
				longitude: 116.39742,
				active: "",
				info:{
					battery_id: '', // 电池id
					brand: '',
					createtime: '',
					driving_license_number: '',
					id: '',
					model: '',
					updatetime: '',
					user_id: '',
					vehicle_layout: '',
					vehicle_type: ''
				},
			}
		},
		onLoad(options) {
			this.active = options.id;
		},
		onShow() {
			this.getDianList()
		},
		// computed: {
		// 	...mapState(['common'])
		// },
		methods: {
			// 获取电池列表
			getDianList() {
				this.$nextTick(() => {
					this.$api.get({
						url: '/car/car/detail',
						data: {
							id: this.active
						},
						success: res => {
							this.info = res
							// console.log('获取电池列表', this.common.car_id)
						}
					});
				});
			},
			bandind() {
				// this.$xyfun.to('/pages/electric/band');
				uni.navigateTo({
					url: '/pages/electric/band?car_id='+this.active
				})
			},
			getLog(type) {
			    uni.navigateTo({
					url: `/pages/electric/list?type=${type}&imei=${this.info.battery.imei}`
				})
			},
			qiangzhi() {
				uni.showModal({
					title: '强制启动',
					content: '请确认是否强制启动车辆？',
					success: res => {
						if (res.confirm) {
							this.$api.post({
								url: '/battery/battery/openBattery',
								data: {
									imei: this.info.battery.imei
								},
								success: res => {
									// 刷新当前页面	
									this.getDianList()
								}
							})
						}
					}
				})
			},
			lastDian() {
				uni.navigateTo({
					url: `/pages/electric/detail?id=${this.info.battery_id}&car_id=${this.active}`
				})
			},
			carList() {
				this.$xyfun.to('/pages/electric/switch');
			},
			addCar() {
				this.$xyfun.to('/pages/electric/add?type=2');
			},
			mapShow() {
				this.$xyfun.to('/pages/electric/map');
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 650rpx;
		position: relative;
		.title-icon {
			position: absolute;
			width: 45rpx;
			height: 45rpx; 
			border-radius: 50rpx;
			top: 15rpx;
			right: 70rpx;
		}
	}
	.form-item {
		width: 650rpx;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			color: rgba(102,102,102,0.32);
			font-size: 24rpx;
			.full-count {
				font-size: 34rpx;
			}
		}
	}
	.form-band {
		width: 568rpx;
		margin-top: 35rpx;
		padding: 40rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		position: relative;
		float: left;
		.form-band-icon {
			position: absolute;
			top: 52rpx;
			right: 50rpx;
			width: 65rpx; 
			height: 65rpx; 
			border-radius: 65rpx;
		}
	}
	.form-map {
		float: left;
		margin-top: 35rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: relative;
		.map {
			width: 650rpx; 
			height: 300rpx;
		}
		.map-b {
			width: 650rpx;
			height: 300rpx;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #2b282852;
		}
	}
	.form-band-2 {
		padding: 25rpx 44rpx;
		width: 222rpx;
		height: 70rpx;
		.form-band-icon2 {
			width: 50rpx;
			height: 50rpx; 
			border-radius: 65rpx;
			float: left;
		}
	}
	.form-band-3 {
		padding: 25rpx 25rpx;
		width: 146rpx;
		height: 95rpx;
		.form-band-icon1 {
			position: absolute;
			width: 50rpx;
			height: 50rpx; 
			border-radius: 0rpx;
			top: 45rpx;
			left: 14rpx;
		}
		.form-band-icon3 {
			width: 50rpx; 
			height: 50rpx; 
			border-radius: 65rpx;
			margin-bottom: 8rpx;
		}
	}
</style>